<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<!--字体图标-->
<link href="../../javaex/pc/css/icomoon.css" rel="stylesheet" />
<!--动画-->
<link href="../../javaex/pc/css/animate.css" rel="stylesheet" />
<!--骨架样式-->
<link href="../../javaex/pc/css/common.css" rel="stylesheet" />
<!--皮肤（缇娜）-->
<link href="../../javaex/pc/css/skin/tina.css" rel="stylesheet" />
<!--jquery，不可修改版本-->
<script src="../../javaex/pc/lib/jquery-1.7.2.min.js"></script>
<!--全局动态修改-->
<script src="../../javaex/pc/js/common.js"></script>
<!--核心组件-->
<script src="../../javaex/pc/js/javaex.min.js"></script>
<!--表单验证-->
<script src="../../javaex/pc/js/javaex-formVerify.js"></script>
<title>后台管理</title>
</head>
<style>
    
</style>

<body>
    <!--全部主体内容-->
<div class="list-content">
	<!--块元素-->
	<div class="block">
		<!--修饰块元素名称-->
		<div class="banner">
			<p class="tab fixed">编辑读者信息</p>
		</div>
	
		<!--正文内容-->
		<div class="main">
			<form id="reader-edit-form">
				<input type="hidden" name="avatar" id="avatar"/>
				<input  type="hidden" name="id" id="edit-id"/>
				<!--文本框-->
				<div class="unit clear">
					<div class="left"><span class="required">*</span><p class="subtitle">头像</p></div>
					<div class="right">
						<img id="view-avatar" src="/photo/view?filename=20210906/1630917146973.png"/>
						<input type="file" class="text"  id="edit-avatar" onchange="upload()"/>
					</div>
				</div>
				<div class="unit clear">
					<div class="left"><span class="required">*</span><p class="subtitle">昵称</p></div>
					<div class="right">
						<input type="text" class="text"  id="nickname" name="nickname" placeholder="请填写昵称" />
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required">*</span><p class="subtitle">用户名</p></div>
					<div class="right">
						<input type="text" class="text" id="username" name="username" placeholder="请填写用户名"/>
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required">*</span><p class="subtitle">密码</p></div>
					<div class="right">
						<input type="password" class="text" id="password" name="password" placeholder="请填写密码"/>
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required"></span><p class="subtitle">生日</p></div>
					<div class="right">
						<input type="text" class="text" id="birthday" name="birthday" placeholder="请填写生日"/>
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required"></span><p class="subtitle">手机号</p></div>
					<div class="right">
						<input type="text" class="text" id="tel" name="tel" placeholder="请填写手机号"/>
					</div>
				</div>

				<!--下拉选择框-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">身份</p></div>
					<div class="right">
						<select id="select" name="identity">
							<option value="">请选择身份</option>
							<option value="0">学生</option>
							<option value="1">教师</option>
							<option value="2">校外人士</option>
							<option value="3">管理员</option>
						</select>
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required"></span><p class="subtitle">邮箱</p></div>
					<div class="right">
						<input type="text" class="text" id="email" name="email" placeholder="请填写邮箱"/>
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required"></span><p class="subtitle">地址</p></div>
					<div class="right">
						<input type="text" class="text" id="address" name="address" placeholder="请填写地址"/>
					</div>
				</div>

				<div class="unit clear">
					<div class="left"><span class="required"></span><p class="subtitle">可借数量</p></div>
					<div class="right">
						<input type="number" class="text" id="size" name="size" placeholder="请填写可借数量"/>
					</div>
				</div>
				<br>
				<br>

				
				<!--提交按钮-->
				<div class="unit clear" style="width: 800px;">
					<div style="text-align: center;">
						<!--表单提交时，必须是input元素，并指定type类型为button，否则ajax提交时，会返回error回调函数-->
						<input type="button" id="return" class="button no" value="返回" />
						<input type="button" id="save" class="button yes" value="保存" />
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script>

	javaex.select({
		id : "select",
		isSearch : false
	});

	// 页面加载执行
    $(document).ready(function(){
        var id = getQueryVariable("id");
        // get读取参数
        $.get("/user/detail",{"id": id}, function(data){
            var user = data.data;
            $("#nickname").val(user.nickname);
            $("#username").val(user.username);
            $("#password").val(user.password);
            $("#birthday").val(user.birthday);
            $("#tel").val(user.tel);
            $("#email").val(user.email);
            $("#address").val(user.address);
            $("#size").val(user.size);
			$("#avatar").val(user.avatar);
			$("#edit-id").val(user.id);
			$("#select").val(user.identity)
			$("#select").find("option").each(function(i,e){
			    if($(e).val()===user.identity){
			        $(e).attr("selected","selected");
                    $("#select").text($(e).text());
				}
			})
            return false;
		});
	});

	// 监听点击保存按钮事件
	$("#save").click(function() {
        var avatar=$("#avatar").val();
        var nickname = $("#nickname").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var tel = $("#tel").val();
        var email = $("#email").val();
        var address = $("#address").val();
        var size = $("#size").val();
        var identity = $('#select option:selected').val();// 身份
		var birthday=$("#birthday").val();
        if(avatar==""){
            javaex.message({
                content : "请上传头像",
                type : "error"
            });
            return false;
        }
        if (nickname == ""||nickname.length>12) {
            javaex.message({
                content : "昵称不能为空且长度不能大于12",
                type : "error"
            });
            return false;
        }
        if (username == ""||username.length>12) {
            javaex.message({
                content : "用户名不能为空且长度不能大于12",
                type : "error"
            });
            return false;
        }
        if (password == ""||password.length>18) {
            javaex.message({
                content : "密码不能为空且长度不能大于18",
                type : "error"
            });
            return false;
        }
        if (size == "") {
            javaex.message({
                content : "可借数量不能为空",
                type : "error"
            });
            return false;
        }
        if (tel == "") {
            javaex.message({
                content : "请填写手机号",
                type : "error"
            });
            return false;
        }
        if (address == "") {
            javaex.message({
                content : "请填写地址",
                type : "error"
            });
            return false;
        }
        if(email==""){
            javaex.message({
                content : "请填写邮箱",
                type : "error"
            });
            return false;
        }
        if(birthday==""){
            javaex.message({
                content : "请填写生日",
                type : "error"
            });
            return false;
        }
        if(identity==""){
            javaex.message({
                content : "请填写身份",
                type : "error"
            });
            return false;
        }
        var data=$("#reader-edit-form").serialize();
        $.ajax({
            //请求方式
            type : "POST",
            url : "/user/edit",
            //数据，json字符串
            data : data,
			dataType:'json',
            //请求成功
            success : function(result) {
                var code = result.code;
                if (code == 200) {
                    javaex.message({
                        content : "修改读者信息成功",
                        type : "success"
                    });
					// 跳转至列表
                    setTimeout(function(){window.location.href="/reader/list";},1500)
                }else{
                    javaex.message({
                        content : result.msg,
                        type : "error"
                    });
				}

            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert("网络错误")
            }
        });
	});

	// 监听点击返回按钮事件
	$("#return").click(function() {
		window.location.href="/reader/list"
	});

    // 获取地址栏参数
    function getQueryVariable(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return false;
    }
    function upload(){
        //formdata
        var formData = new FormData();
        formData.append('photo',document.getElementById('edit-avatar').files[0]);
        $.ajax({
            url:'/upload/upload_photo',
            contentType:false,
            processData:false,
            data:formData,
            type:'POST',
            success:function(data){
                if(data.type == "success"){
                    alert("上传成功");
                    $("#avatar").val(data.data);
                    $("#view-avatar").attr("src","../photo/view?filename="+data.data);
                }else{
                    data = $.parseJSON(data);
                    alert("上传失败");
                }
            },
            error:function(data){
                alert('网络错误!');
            }
        });
    }
</script>
</body>
</html>